<style lang="less" scoped>
.bg-carousel {
    position: relative;
    height: 450px;
    width: 100%;

    .list {
        height: 100%;
        width: 100%;
        a {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-position: 50% 50%;
            background-repeat: initial;
        }
    }

    .dots{
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;

      .dot{
        width: 10px;
        height: 10px;
        background-color: #fff;
        margin: 10px;
        border-radius: 50%;
        cursor: pointer;
        &:hover, &.active{
          background-color: #37CA73;
        }
      }
    }

    @media screen and (max-width: 768px) {
        height: 180px;
        height: 48vw;
        width: 100%;
        width: 100vw;

        .list {

            a {
                background-position: 50% 50%;
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
        }

        &.is-order {
          height: 100vw;
          width: 100vw;
        }
    }
}
</style>

<template>

<div id="homeCarousel" :class="{'bg-carousel': true, 'is-order': this.isOrder}">
    <div tag="div" class="list">
<!--       <a :href="img.link" v-for="(img, index) in imgs" key="index" v-show="showIndex === index" :style="{order: index, backgroundImage: imgUrl(img.url)}" onclick="return false">
</a> -->
      <v-touch tag="a" v-for="(img, index) in imgs" key="index" :href="img.link" v-show="showIndex === index" :style="{order: index, backgroundImage: imgUrl(img.url)}" v-on:swipeleft="swipe(index, true)" v-on:swiperight="swipe(index, false)"></v-touch>
    </div>
    <div class="dots">
      <div v-for="(img, index) in imgs" key="index" :style="{order: index, backgroundColor: showIndex === index ? '#37CA73' : ''}" class="dot" @click="switchImg(index)"></div>
    </div>
</div>

</template>

<script>
import banner0 from '../../../assets/images/new-home/banner0.png'
import banner1 from '../../../assets/images/new-home/banner.png'
import banner2 from '../../../assets/images/hc/home-carousel.jpeg'

import test from '../../../assets/images/new-home/test.png'

export default {
    name: "homeCarousel",
    props: {
      imgsData: {
        type: Array
      },
      isOrder: {
        type: Boolean,
        default: false
      }
    },
    data: function data() {
        return {
            imgs: [
              {
                link: 'http://www.suntekmall.com/promotions/5',
                // url: 'http://oqhwiuu27.bkt.clouddn.com/banner-1.png',
                url: banner0
              },
              {
                link: 'http://www.suntekmall.com/promotions/1',
                // url: 'http://oqhwiuu27.bkt.clouddn.com/banner-1.png',
                url: banner1
              },
              {
                link: 'http://www.suntekmall.com/brand.html',
                // url: 'http://oqhwiuu27.bkt.clouddn.com/banner-2.jpg',
                url: banner2
              }
            ],
            showIndex: 0,
        }
    },
    created: function created() {
      if (this.imgsData) {
        this.imgs = this.imgsData.map((item, index) => {
          return {link: this.imgs[index].link, url: item.image_url}
        })
      }
    },
    mounted: function mounted() {
      this.setTime()
    },
    computed: {},
    methods: {
      switchImg: function(index) {
        this.animate(index)
      },
      setTime: function() {
        var _this = this
        setInterval(function () {
          _this.animate()
        }, 5000)
      },
      animate: function(index=null) {
        if (index) {
          this.showIndex = index
        } else {
          if (this.showIndex == this.imgs.length - 1 ) {
            this.showIndex = 0
          } else {
            this.showIndex++
          }
        }
      },
      imgUrl: function(url) {
        return 'url('+ url +')'
      },
      swipe: function (index, juge) {
        if (juge && (index + 1 > this.imgs.length -1)) {
          index = 0
        } else if (juge && (index + 1 <= this.imgs.length -1)) {
          index++
        } else if (!juge && (index - 1 < 0)) {
          index = this.imgs.length -1
        } else if (!juge && (index - 1 >= 0)) {
          index --
        }
        this.animate(index)
      }
    }
}

</script>
